<template>
  <div class="box">
    <div class="box-header">
      <span class="title">流程事项清单</span>
    </div>
    <div class="box-body">
      <ul class="tools">
        <li class="item">
          <select name id v-model="filterOption" class="selector">
            <option value="">全部事项</option>
            <option value="0">未完成的</option>
            <option value="1">已完成的</option>
          </select>
        </li>
        <li class="item">
          <input type="text" class="textbox" v-model="keyword" placeholder="请输入事项名称以搜索" />
        </li>
        <li class="item">
          <button class="btn bg-blue" type="button" @click="renderList(1)">
            <span class="text">查询</span>
          </button>
        </li>
      </ul>
      <table class="dtable">
        <thead>
          <tr>
            <td>序号</td>
            <td>流程事项名称</td>
            <td>责任部门</td>
            <td>责任人</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in List" :key="'ptr-'+index" v-if="List.length>0">
            <td>{{index + 1}}</td>
            <td @click="sendRequire(item)" style="cursor:pointer;">
              <div class="caption" :title="item.projectName">{{item.projectName}}</div>
              </td>
            <td>{{item.groupName}}</td>
            <td>{{item.dqclUser | nullHandle}}</td>
          </tr>
          <tr v-else>
            <td colspan="4">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <x-loading :show="showLoading"></x-loading>
      <x-pager
        :page="page"
        :page-size="pageSize"
        :total="total"
        :max-page="maxPage"
        @pagehandler="renderList"
      ></x-pager>
    </div>
  </div>
</template>

<script>
import Loading from "@/components/Loading";
import Pager from "@/components/Pager";
import axios from "axios";
import bus from "@/utils/bus";

export default {
  name: "",
  data() {
    return {
      page: 1,
      pageSize: 15,
      total: 0,
      maxPage: 6,
      showLoading: false,
      filterOption: '',
      keyword: null,
      List:[]
    };
  },
  components: {
    "x-loading": Loading,
    "x-pager": Pager
  },
  methods: {
    renderList(page,isInit) {
      this.showLoading = true;
      this.page = page;
      let params = {
        isFinished: this.filterOption,
        projectName: this.keyword,
        pageIndex: page,
        pageSize: this.pageSize
      };
      axios.get(this.URLHEAD_TA + "getXMXX", { params: params }).then(res => {
        let json = res.data;
        this.List = json.Data.list;
        this.total = json.Data.count;
        this.showLoading = false;
        if(isInit){
            this.sendRequire(this.List[0])
        }
      });
    },
    sendRequire(item) {
      let msg = {
        name: item.projectName,
        id: item.code
      };
      bus.$emit("render-flow-analyze", msg);
    }
  },
  mounted() {
    this.renderList(1,true);
  }
};
</script>

<style  scoped>
.col{
    padding: 0;
}
.box-body .tools {
    display: flex;
    padding: 10px;
}

.box-body .tools .item {
    padding-right: 10px;
}

.tools .btn {
    padding: 6px 30px;
}
.caption{
  text-overflow: ellipsis;
  width:429px;
  overflow: hidden;
  white-space: nowrap;
}
.dtable tr td {
    line-height: 46px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    
}
</style>